<template>
<div>
  <Modal v-model="HtModal" fullscreen title="宏图地图选点" @on-ok="HTMapMarkerConfirm">
    <div :id="mapID" class="mapClass"></div>
  </Modal>
</div>
</template>

<script>
// import { HTgetZoom } from '../../libs/HT-map-Util'
import { mapHTUrl } from '../../libs/mapTypeUtil'
import { HTautoCenterTwo } from '../../libs/HT-map-Util'

export default {
  name: 'HT-map-marker',
  props: {
    placeInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    gardenInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    mapID: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      HtModal: false,
      HTMapMarkerMap: null,
      url: mapHTUrl(),
      center: [],
      centerMarker: null
    }
  },
  methods: {
    init () {
      if (this.placeInfo.csc_mapjson_ht === undefined ||
          this.placeInfo.csc_mapjson_ht === '' ||
          this.placeInfo.csc_mapjson_ht === '0,0' ||
          this.placeInfo.csc_mapjson_ht === 'undefined,undefined'
      ) {
        // this.$Notice.error({ title: '坐标解析异常！', desc: '坐标数据异常，将使用默认坐标展示!' })
        this.center = HTautoCenterTwo(this.gardenInfo.csc_mapjson_ht, this)
      } else {
        this.center = this.placeInfo.csc_mapjson_ht.split(',')
        console.log(this.center)
      }
      let _this = this
      setTimeout(function () {
        _this.LoadMapHT()
      }, 1000)
      _this.HtModal = true
    },
    LoadMapHT () {
      this.HTMapMarkerMap = L.map(this.mapID, {
        crs: L.CRS.EPSG4326,
        preferCanvas: true,
        center: this.center,
        maxZoom: 18,
        minZoom: 9,
        zoom: 3,
        logoControl: false
      })
      L.supermap.tiledMapLayer(this.url).addTo(this.HTMapMarkerMap)
      this.createMaker()
      this.HTMapMarkerMap.setView(this.center, 16)
      var polygon = L.polygon(JSON.parse(this.gardenInfo.csc_mapjson_ht),
        { color: '#3CB371', smoothFactor: 0.5, opacity: 1, fillOpacity: 0.3 })
        .addTo(this.HTMapMarkerMap)
      let _this = this
      polygon.on('click ', function (e) {
        _this.HTMapMarkerMap.removeLayer(_this.centerMarker)
        console.log(e.latlng)
        _this.center = []
        _this.center.push(e.latlng.lat)
        _this.center.push(e.latlng.lng)
        _this.createMaker()
      })
    },
    createMaker () {
      this.centerMarker = L.marker(this.center, {
        // icon: greenIcon
      }).addTo(this.HTMapMarkerMap)
    },
    HTMapMarkerConfirm () {
      let csc_mapjson_ht = this.center[0] + ',' + this.center[1]
      this.$emit('placeCallBack', csc_mapjson_ht)
    }
  },
  watch: {
    HtModal (val) {
      if (val === false) {
        this.HTMapMarkerMap && this.HTMapMarkerMap.remove()
      }
    }
  }
}
</script>

<style scoped>
.mapClass {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/deep/ .leaflet-top{
  top: 85%;
}
</style>
